<template>
	<div class="view">
		<div class="item_title" style="font-size: 16px;color: #232842;margin-bottom: 20px;">网站配置</div>
		<el-form label-position="left" v-model="form" label-width="120px" label-align="center">
			<div class="item-view">
				<el-form-item label="小程序名称:">
					<el-input style="width: 320px;" v-model="form.title"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="logo：">
					<div @click="uploadPicture('flagImg', 1)" v-if="!form.logo">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.logo" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 1)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.logo" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.logo)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('logo')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="版本号:">
					<el-input style="width: 320px;" v-model="form.version"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="邮箱:">
					<el-input style="width: 320px;" v-model="form.email"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="地址:">
					<el-input style="width: 320px;" v-model="form.addr"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="联系方式:">
					<el-input style="width: 320px;" v-model="form.tel"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="营业执照：">
					<div @click="uploadPicture('flagImg', 2)" v-if="!form.businessLicense">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.businessLicense" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 2)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.businessLicense" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.businessLicense)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('businessLicense')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="人力资源许可证：">
					<div @click="uploadPicture('flagImg', 3)" v-if="!form.hrZheng">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.hrZheng" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 3)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.hrZheng" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.hrZheng)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('hrZheng')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="维权咨询流程图：">
					<div @click="uploadPicture('flagImg', 4)" v-if="!form.weiquanPicdir">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.weiquanPicdir" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 4)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.weiquanPicdir" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.weiquanPicdir)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('weiquanPicdir')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="维权咨询电话:">
					<el-input style="width: 320px;" v-model="form.weiquanTel"></el-input>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="个人中心底部文字（回车换行显示）:">
					<el-input type="textarea" :rows="5" style="width: 320px;" v-model="form.bottomCnt"></el-input>
				</el-form-item>
			</div>


			<div class="item-view">
				<el-form-item label="企业默认logo：">
					<div @click="uploadPicture('flagImg', 5)" v-if="!form.companyLogo">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.companyLogo" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 5)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.companyLogo" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.companyLogo)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('companyLogo')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="求职者默认头像（男）：">
					<div @click="uploadPicture('flagImg', 6)" v-if="!form.seekerAvatar1">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.seekerAvatar1" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 6)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.seekerAvatar1" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.seekerAvatar1)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('seekerAvatar1')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>
			<div class="item-view">
				<el-form-item label="求职者默认头像（女）：">
					<div @click="uploadPicture('flagImg', 7)" v-if="!form.seekerAvatar2">
						<el-upload :action="$api.uploadFile" list-type="picture-card" :limit="1" :disabled="true">
							<i slot="default" class="el-icon-plus"></i>
							<div slot="file">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.seekerAvatar2" alt="">
							</div>
						</el-upload>
					</div>
					<div class="img_box" v-else @click="uploadPicture('flagImg', 7)">
						<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.seekerAvatar2" alt="">
						<div class="img_tip">
							<div class="img_big" @click.stop="imgBig($api.imgUrl+form.seekerAvatar2)">
								<i class="el-icon-zoom-in"></i>
							</div>
							<div class="img_remove" @click.stop="imgRemove('seekerAvatar2')">
								<i class="el-icon-delete"></i>
							</div>
						</div>
					</div>
				</el-form-item>
			</div>

		</el-form>
		<div class="item_btn" style="margin-top: 20px;">
			<el-button type="primary" size="medium" @click="save" :disabled="isAdd">保存并发布</el-button>
		</div>

		<el-dialog title="裁切封面" :visible.sync="cropperModel" width="1120px" center :close-on-click-modal="false">
			<cropper-image :Name="cropperName" @uploadImgSuccess="handleUploadSuccess" ref="child" :mode="mode">
			</cropper-image>
		</el-dialog>
		<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>
		<FileUpload @fileChange="imgFileChange" ref="imgFile" accept="image/*"></FileUpload>

	</div>
</template>

<script>
import CropperImage from "../../../components/CropperImage.vue";
import FileUpload from "@/components/FileUpload.vue"
export default {
	components: {
		CropperImage,
		FileUpload
	},
	data() {
		return {
			form: {
				id:'',
				title:'',
				logo:'',
				version:'',
				businessLicense:'',
				hrZheng:'',
				email:'',
				addr:'',
				tel:'',
				weiquanTel:"",
				weiquanPicdir:"",
				bottomCnt:"",
				companyLogo:"",
				seekerAvatar1:"",
				seekerAvatar2:"",
			},

			dialogImageUrl: '',
			dialogVisible: false,
			disabled: false,

			formValidate: {
				mainImage: '',
			},
			ruleValidate: {
				mainImage: [{
					required: true,
					message: '请上传图片',
					trigger: 'blur'
				}],
			},
			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false,
			mode: [120, 120],

			p_index: "",

			mealList: this.$root.mealList,

			isAdd: false,
		}
	},
	computed: {
	},
	methods: {

		linksDelete(index) {
			this.form.links.splice(index, 1)
		},

		linksAddr() {
			if (this.form.links.length < 5) {
				this.form.links.push({ name: "", addr: "" })
			} else {
				this.$message.error("最多存在5条数据")
			}
		},

		// 获取初始数据
		data_init() {
			let that = this
			that.$http({
				'method': 'get',
				'url': this.$api.config
			}).then(res => {
				if (res.data.code == 20000) {
					const data = res.data.data.usual;
					if(data){
						this.form.id = data.id
						this.form.title = data.title
						this.form.logo = data.logo
						this.form.version = data.version
						this.form.businessLicense = data.businessLicense
						this.form.hrZheng = data.hrZheng
						this.form.email = data.email
						this.form.addr = data.addr
						this.form.tel = data.tel
						this.form.weiquanPicdir = data.weiquanPicdir
						this.form.weiquanTel = data.weiquanTel
						this.form.bottomCnt = data.bottomCnt?data.bottomCnt.replaceAll("<br>","\n"):data.bottomCnt
						this.form.companyLogo = data.companyLogo
						this.form.seekerAvatar1 = data.seekerAvatar1
						this.form.seekerAvatar2 = data.seekerAvatar2
					}
				}
			})
		},

		// 保存数据
		save() {

			this.form.bottomCnt = this.form.bottomCnt?this.form.bottomCnt.replaceAll(/\n/g,"<br>"):this.form.bottomCnt

			this.isAdd = true
			this.$http({
				'method': 'post',
				'url': this.$api.configUpdate,
				data: this.form
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message({
						message: res.data.message,
						type: 'success'
					});

					this.data_init()
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})

		},

		// 图片放大
		imgBig(type) {
			this.imgName = type
			this.imgVisible = true
		},

		// 图片删除
		imgRemove(type) {
			this.form[type] = ""
		},

		// 图片上传
		uploadPicture(name, p_index) {
			this.p_index = p_index
			this.$refs.imgFile.open();
			// this.cropperName = name;
			// this.cropperModel = true;
			// setTimeout(() => {
			// 	this.$refs.child.clear()
			// }, 100);
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			// this.cropperModel = false;
			// this.cropperName = '';
			if (this.p_index == 1) {
				this.form.logo =data
			} else if (this.p_index == 2) {
				this.form.businessLicense = data
			} else if (this.p_index == 3) {
				this.form.hrZheng = data
			} else if (this.p_index == 4) {
				this.form.weiquanPicdir = data
			}else if (this.p_index == 5) {
				this.form.companyLogo = data
			}else if (this.p_index == 6) {
				this.form.seekerAvatar1 = data
			}else if (this.p_index == 7) {
				this.form.seekerAvatar2 = data
			}
		},
		imgFileChange(data) {
			if (this.p_index == 1) {
				this.form.logo =data
			} else if (this.p_index == 2) {
				this.form.businessLicense = data
			} else if (this.p_index == 3) {
				this.form.hrZheng = data
			} else if (this.p_index == 4) {
				this.form.weiquanPicdir = data
			}else if (this.p_index == 5) {
				this.form.companyLogo = data
			}else if (this.p_index == 6) {
				this.form.seekerAvatar1 = data
			}else if (this.p_index == 7) {
				this.form.seekerAvatar2 = data
			}
		},
	},
	created() {
		let that = this
		that.data_init()
		setTimeout(function () {
			that.mealList = that.$root.mealList
		}, 300)

		this.$emit('toNum', 1)

	}
}
</script>

<style scoped>
>>>.el-form-item__label {
	text-align: center!important;
}

>>>.el-input__inner {
	height: 36px;
	line-height: 36px;
}

>>>.el-form-item {
	margin-bottom: 20px;
}

.item_box {
	display: flex;
}

>>>.el-upload {
	width: 120px;
	height: 120px;
}

>>>.el-upload-list__item {
	width: 120px;
	height: 120px;
}

.item {
	margin-right: 20px;
}

.img_box {
	width: 120px;
	height: 120px;
	position: relative;
	overflow: hidden;
}

.img_box img {
	width: 120px;
	height: 120px;
	border-radius: 6px;
}

.img_tip {
	width: 120px;
	height: 120px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: space-around;
	opacity: 0;
	transition: .2s linear all;
}

.img_box:hover .img_tip {
	opacity: 1;
}

.img_tip i {
	color: #fff;
	cursor: pointer;
}

.img_tip i:hover {
	color: #0076FF;
}

.img_title {
	width: 100%;
	text-align: center;
	padding-top: 10px;
}

.img_box {
	margin-top: 10px;
}

.item-view {
	display: flex;
}

.item_title {
	margin-bottom: 10px;
}
</style>
